<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎来到德莱联盟</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  body {
    width: 1200px;
    margin: 100px auto;
    text-align: center;
  }
  ul{
    list-style: none;
  }
  .btn {
    padding: 5px 10px;
    background: aqua;
  }
  .add {
    padding: 5px 10px;
    background: #f33;
    color: #fff;
    border: none;
    cursor: pointer;
    outline: none;
  }
  .stu-id {
    padding: 5px 10px;
  }
  ul {
    margin-top: 100px;
  }
  li {
    width: 255px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #eee;
    border-right: none;
  }
  li span {
    border-right: 1px solid #eee;
  }
  .li-id {
    display: inline-block;
    width: 50px;
  }
  .li-name {
    width: 100px;
    display: inline-block;
  }
  .li-sex {
    width: 50px;
    display: inline-block;
  }
  .li-opera {
    width: 50px;
    display: inline-block;
  }
  .mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
  }
  .content{
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 30%;
    min-width: 450px;
    height: 220px;
    box-shadow: 1px 2px 1px #000;
    border-radius: 5px;
    padding: 15px;
  }
  .content p {
    line-height: 40px;
  }
  .content input {
    padding: 5px 10px;
  }
  .content select {
    width: 150px;
    height: 30px;
    background: #fff;
  }
  .close {
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
  }
</style>
<body>
  <input type="number" class="stu-id">
  <button class="btn" onclick="searchStu()">查询学生信息</button>
  <button class="add" onclick="addConfim()">+新增</button>
  <ul class="list"></ul>
  <div class="mask">
    <div class="content">
      <div class="close" onclick="closeMask()">x</div>
      <p style="text-align: left;">新增</p>
      <p class="num">
        <span>编号</span>
        <input type="number" class="add-num">
      </p>
      <p class="name">
        <span>姓名</span>
        <input type="text" class="add-name">
      </p>
      <p class="sex">
        <span>性别</span>
        <select name="sex" id="add-sex">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </p>
      
      <button class="add" onclick="addStu()" style="float: right;margin-top: 20px;">新增学员</button>
    </div>
  </div>
</body>
<script src="./resources/js/jquery-3.4.1.min.js"></script>
<script>
  function searchStu() {
    var id = $('.stu-id')[0].value
    if(id){
      search(id);
    } else {
      selectAll();
    }
  }
  function search(id){
    $.ajax({
      type: 'get',
      url: '/User/showUser?userId=1',
      success: function(res){
        if(res.code === 0){
          showList(res.data)
        }
      }
    })
  }
  function selectAll(){
    $.ajax({
      type: 'get',
      url: '/User/showAll',
      success: function(res){
        if(res.code === 0){
          showList(res.data)
        }
      }
    })
  }
  function insert(user){
    $.ajax({
      type: 'post',
      url: '/User/addUser',
      data: user,
      success: function(res){
        $('.mask').hide()
        if(res.code === 0){
          selectAll();
        }
      }
    })
  }
  
  function update(user){
    $.ajax({
      type: 'post',
      url: '/User/updateUser',
      data: user,
      success: function(res){
        console.log(res)
      }
    })
  }
  function del(id){
    $.ajax({
      type: 'post',
      url: '/User/delUser',
      data: {userId: id},
      success: function(res){
        if(res.code === 0){
          selectAll();
        }
      }
    })
  }
  function showList(list){
    var $ul = $('ul')
    $ul.html('');
    $('<li><span class="li-id">编号</span><span class="li-name">姓名</span><span class="li-sex">性别</span><span class="li-opera">操作</span></li>').appendTo($ul);
    list.forEach(function(item) {
      var $li = $('<li class="list-item"><span class="li-id">' + item.id +'</span><span class="li-name">'+item.name+'</span><span class="li-sex">' + item.sex +'</span><span class="li-opera" data-id=" ' +item.id+'" style="color: #29f; cursor: pointer;">删除</span></li>')
      $li.appendTo($ul)
    })
  }
  function addConfim(){
    $('.mask').show()
  }
  function addStu(){
    var obj = {
      id: $('.add-num')[0].value,
      name: $('.add-name')[0].value,
      sex: $('#add-sex')[0].value
    }
    insert(obj)
  }
  function closeMask(){
    $('.mask').hide();
  }
  $('ul').on('click', '.list-item .li-opera', function(){
    var id = $(this).attr('data-id')
    del(id)
  })
</script>
</html>